<template>
  <div>
    <div v-if="showAgentPage">
      <!-- 查询参数表单 -->
      <div class="check-form-box">
        <el-form :inline="true" :model="searchModel" class="demo-form-inline">
          <el-form-item label="ID">
            <el-input
              v-model.trim="searchModel.id"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              placeholder="请输入代理商ID"
            />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model.trim="searchModel.username"
              placeholder="请输入代理商姓名"
            />
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input
              v-model.trim="searchModel.mobile"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              placeholder="请输入代理商手机号码"
            />
          </el-form-item>
          <el-form-item label="注册日期">
            <el-date-picker
              v-model="searchModel.createDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>

          <el-form-item label="一级代理ID">
            <el-input
              v-model.trim="searchModel.firstMasterId"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              placeholder="请输入一级代理ID"
            />
          </el-form-item>
          <el-form-item label="一级代理名称">
            <el-input
              v-model.trim="searchModel.firstMasterName"
              placeholder="请输入一级代理名称"
            />
          </el-form-item>
          <el-form-item label="查询子代理">
            <el-input
              v-model.trim="searchModel.shangId"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              placeholder="请输入代理商ID,查询该ID下的子代理商"
            />
          </el-form-item>
          <el-form-item label="代理级别">
            <el-input
              v-model.trim="searchModel.agentLevel"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              placeholder="请输入代理级别"
            />
          </el-form-item>
        </el-form>
        <view class="subBtnBox">
          <el-button type="primary" color="#ea5b24" @click="search()"
            >查询</el-button
          >
          <el-button
            type="primary"
            color="#ea5b24"
            @click="showDialog(0, null)"
            v-if="pinia.isShow[29]"
            >添加一级代理</el-button
          >
          <el-button
            type="primary"
            color="#ea5b24"
            @click="exportAgent()"
            v-if="pinia.isShow[34]"
            >导出Excel</el-button
          >
        </view>
      </div>
      <!-- 查询结果列表 -->
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column width="80" prop="id" label="ID" />
        <el-table-column prop="userName" label="负责人姓名" />
        <el-table-column prop="groupName" label="部门名称" />
        <el-table-column prop="userMobile" label="手机号码" />
        <el-table-column width="80" prop="agentLevel" label="代理级别" />
        <!-- <el-table-column prop="beAdministrator" label="是否管理员">
          <template #default="scope">
            {{ scope.row.beAdministrator == null ? '' : scope.row.beAdministrator ? '是' : '否' }}
          </template>
        </el-table-column> -->
        <el-table-column prop="shangId" label="上级代理ID" />
        <el-table-column prop="shangName" label="上级代理名称" />
        <el-table-column prop="firstMasterId" label="一级代理id" />
        <el-table-column prop="firstMasterName" label="一级代理名称" />
        <el-table-column
          prop="url"
          label="中视url"
          show-overflow-tooltip="true"
        />
        <el-table-column prop="userStatus" width="80" label="状态">
          <template #default="scope">
            {{
              scope.row.userStatus == null
                ? ""
                : scope.row.userStatus == 1
                ? "正常"
                : "冻结"
            }}
          </template>
        </el-table-column>
        <el-table-column width="160" prop="createTime" label="注册时间" />
        <el-table-column width="170" fixed="right" label="操作">
          <template v-slot:default="scope">
            <div v-if="scope.row.agentLevel === 1">
              <el-button
                link
                type="primary"
                size="small"
                @click="showDialog(1, scope.row)"
                v-if="pinia.isShow[31]"
                >编辑</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="disableAgent(scope.row)"
                v-if="pinia.isShow[32]"
                >{{ scope.row.userStatus == 1 ? "禁用" : "启用" }}</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="packConfig(scope.row)"
                v-if="pinia.isShow[33]"
                >套餐设置</el-button
              >
            </div>
            <el-button
              link
              type="primary"
              size="small"
              @click="revisePassword(scope.row)"
              v-if="pinia.isShow[30]"
              >重置密码</el-button
            >
            <span v-if="scope.row.agentLevel === 1">
              <el-button
                link
                type="primary"
                size="small"
                @click="associationSalesReps(scope.row)"
                v-if="pinia.isShow[35]"
                >关联销售代表</el-button
              >
            </span>
            <el-button
              link
              type="primary"
              size="small"
              @click="locationDialog(scope.row)"
              v-if="pinia.isShow[36]"
              >查看登录地</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="urlLocationDialog(scope.row)"
              v-if="pinia.isShow[178]"
              >中视url</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>

      <!--添加/编辑代理表单 -->
      <el-dialog
        v-model="editFormVisible"
        :title="dialogTitle"
        center="true"
        modal="true"
        width="30%"
      >
        <el-form
          :model="agentModel"
          class="form-agentModel"
          :rules="rules"
          ref="ruleFormRef"
        >
          <el-form-item
            label="代理商id："
            v-if="false"
            :label-width="editFormLabelWidth"
          >
            <el-input v-model.trim="agentModel.id" autocomplete="off" />
          </el-form-item>
          <el-form-item
            label="代理商名称："
            prop="groupName"
            :label-width="editFormLabelWidth"
          >
            <el-input v-model.trim="agentModel.groupName" autocomplete="off" />
          </el-form-item>
          <el-form-item
            label="负责人姓名："
            prop="userName"
            :label-width="editFormLabelWidth"
          >
            <el-input v-model.trim="agentModel.userName" autocomplete="off" />
          </el-form-item>
          <el-form-item
            label="手机号码："
            prop="userMobile"
            :label-width="editFormLabelWidth"
          >
            <el-input
              v-model.trim="agentModel.userMobile"
              :maxlength="11"
              autocomplete="off"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
            />
          </el-form-item>
          <!-- <el-form-item label="易宝账户：" :label-width="editFormLabelWidth">
            <el-input v-model="agentModel.yibaoNo" autocomplete="off" />
          </el-form-item> -->
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editFormVisible = false">取消</el-button>
            <el-button
              type="primary"
              @click="formSubmit(ruleFormRef)"
              color="#ea5b24"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>

      <!-- 关联销售代表dialog -->
      <div>
        <el-dialog
          v-model="salesRepsDialogVisible"
          title="销售代表设置"
          center="true"
          modal="true"
          width="450px"
        >
          <el-form :model="salesReps">
            <el-form-item label="渠道部门名称:">{{
              salesReps.channelGroupName
            }}</el-form-item>
            <el-form-item label="渠道负责人:">{{
              salesReps.channelUserName
            }}</el-form-item>
            <el-form-item label="销售代表:">
              <div v-if="alesRepresentativeShow">
                <el-input
                  v-model.trim="salesReps.salesRepresentativeID"
                  :formatter="(value) => value.replace(/[^\d]/g, '')"
                  class="input-salesReps"
                />
                <el-button
                  link
                  type="primary"
                  class="btn-primary"
                  size="small"
                  @click="drawStaff(salesReps.salesRepresentativeID, 1)"
                  >提取</el-button
                >
                <span>{{ salesReps.salesRepresentativeText }}</span>
              </div>
              <div v-else>
                <span>{{ salesReps.salesRepresentativeText }}</span>
                <el-button
                  link
                  type="primary"
                  class="btn-primary"
                  size="small"
                  @click="editSalesReps(1)"
                  >编辑</el-button
                >
              </div>
            </el-form-item>
            <el-form-item label="销售总监:">
              <div v-if="salesDirectorShow">
                <el-input
                  v-model.trim="salesReps.salesDirectorID"
                  :formatter="(value) => value.replace(/[^\d]/g, '')"
                  class="input-salesReps"
                />
                <el-button
                  link
                  type="primary"
                  class="btn-primary"
                  size="small"
                  @click="drawStaff(salesReps.salesDirectorID, 2)"
                  >提取</el-button
                >
                <span>{{ salesReps.salesDirectorText }}</span>
              </div>
              <div v-else>
                <span>{{ salesReps.salesDirectorText }}</span>
                <el-button
                  link
                  type="primary"
                  class="btn-primary"
                  size="small"
                  @click="editSalesReps(2)"
                  >编辑</el-button
                >
              </div>
            </el-form-item>
          </el-form>
          <template #footer>
            <span>
              <el-button type="primary" @click="setAgentSale()" color="#ea5b24"
                >保存</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>

      <!-- 查看登陆地dialog -->
      <el-dialog
        v-model="locationDialogVisible"
        draggable
        center="true"
        modal="true"
        width="1200px"
      >
        <el-text class="span-location" size="large"
          >常用所在城市：{{ cityStr }}</el-text
        >
        <el-table
          :data="locationTableData.data"
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column prop="loginTime" width="100" label="登录时间" />
          <el-table-column prop="endpoint" label="登录端" />
          <el-table-column prop="ip" label="登录IP" />
          <el-table-column prop="longitude" label="经度" />
          <el-table-column prop="latitude" label="纬度" />
          <el-table-column prop="province" label="省份" />
          <el-table-column prop="city" label="城市" />
          <el-table-column prop="district" label="区县" />
          <el-table-column prop="address" label="详细地址" />
        </el-table>
        <!-- 分页插件 -->
        <div style="text-align: center">
          <el-pagination
            :total="locationTotalNum"
            small
            @current-change="locationHandleCurrentChange"
            background
            :page-size="locationSize"
            layout="prev, pager, next, total"
            :current-page="locationPage"
          />
        </div>
      </el-dialog>

      <!--中视url -->
      <el-dialog
        v-model="urlDialogVisible"
        title="中视url"
        center="true"
        modal="true"
        width="30%"
      >
        <el-form :model="urlModel" class="form-agentModel">
          <el-form-item label="URL：">
            <el-input
              v-model="urlModel.url"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 6 }"
              placeholder="请输入中视url"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="urlDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editUrl" color="#ea5b24"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
    <div class="check-form-box" v-if="showPackConfigPage">
      <PackConfig :curAgent="transData" @packConfigBack="goBack"></PackConfig>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  getProxyList,
  editAgent,
  addAgent,
  disableAgentApi,
  resetPass,
  findAgentExcelApi,
  findStaffByIdApi,
  setAgentSaleApi,
  findAuditInfoApi,
  updateUrlApi,
} from "../../../api/index";
import { formatDateTime } from "../../../utils/formatDateTime.js";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import PackConfig from "../packConfig/index.vue";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();
// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
let size = 8;

// 登陆地列表数据
let locationTableData: any = reactive([]);
const locationTotalNum = ref(0);
const locationPage = ref(1);
const locationSize = 8;
// 常住城市文字
const cityStr = ref();
// 登陆地展示dialog控制
const locationDialogVisible = ref(false);

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  findAgent(flipData);
};

// 登陆地数据翻页
const locationHandleCurrentChange = (val: number) => {
  locationPage.value = val;
  findAuditInfo();
};

// 控制编辑表单显示标识
const editFormVisible = ref(false);
const editFormLabelWidth = "110px";
// 添加/编辑对话框标题
const dialogTitle = ref("");
// 添加/编辑对话框类型 0：添加代理 1：编辑代理
const dialogType = ref(0);
// 添加/编辑代理模型
const agentModel = reactive({
  id: null,
  groupName: null,
  userName: null,
  userMobile: null,
  // yibaoNo: null,
});
// 传入一级代理配置的数据
const transData = ref({
  agentId: 0,
  agentName: "",
  mobile: "",
  registerTime: "",
  page: null,
  size: null,
});

// 查询代理条件
const searchModel = reactive({
  id: null,
  username: null,
  mobile: null,
  firstMasterId: null,
  firstMasterName: null,
  shangId: null,
  agentLevel: null,
  createDate: null,
  startTime: null,
  endTime: null,
  page: page,
  size: size,
});

// 查询登陆地条件
let locationModel = reactive({
  agentId: null,
  page: locationPage,
  size: locationSize,
});

// 销售代表dialog控制
const salesRepsDialogVisible = ref(false);
// 销售代表编辑框控制
const alesRepresentativeShow = ref(true);
// 销售总监编辑框控制
const salesDirectorShow = ref(true);

// 销售代表模型
const salesReps = reactive({
  agentId: null, //代理商id
  channelGroupName: null, //渠道部门名称
  channelUserName: null, //渠道负责人姓名
  salesRepresentativeID: null, //销售代表ID
  salesDirectorID: null, //销售总监ID
  salesRepresentativeText: "", //销售代表显示文本
  salesDirectorText: "", //销售总监显示文本
});

// 中视urldialog控制
const urlDialogVisible = ref(false);
// 中视url模型
const urlModel = reactive({
  agentId: null,
  url: null,
});

//表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  groupName: [{ required: true, message: "请输入代理商名称", trigger: "blur" }],
  userName: [{ required: true, message: "请输入负责人姓名", trigger: "blur" }],
  userMobile: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
});

// 条件搜索代理
const search = () => {
  page.value = 1;
  if (searchModel.createDate) {
    searchModel.startTime = formatDateTime(searchModel.createDate[0]);
    searchModel.endTime = formatDateTime(searchModel.createDate[1]).replace(
      "00:00:00",
      "23:59:59"
    );
  } else {
    searchModel.startTime = null;
    searchModel.endTime = null;
  }
  searchParmSearch();
  findAgent(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};

// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

// 条件搜索代理
const findAgent = (searchModel) => {
  getProxyList(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.data;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 启用/禁用代理
const disableAgent = (row) => {
  ElMessageBox.confirm(
    `是否确认${row.userStatus == 1 ? "禁用" : "启用"}该代理商?`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    disableAgentApi({
      state: row.userStatus == 1 ? 2 : 1,
      ids: [row.id],
    }).then((res) => {
      if (res.data.code === 2000) {
        row.userStatus = row.userStatus == 1 ? "2" : "1";
        ElMessage({
          message: "成功.",
          type: "success",
        });
        findAgent(searchModel);
      } else {
        ElMessage.error("失败");
      }
    });
  });
};

// 打开登陆地展示dialog
const locationDialog = (row) => {
  locationDialogVisible.value = true;
  locationModel.agentId = row.id;
  findAuditInfo();
};

// 条件搜索代理
const findAuditInfo = () => {
  findAuditInfoApi(locationModel).then((res) => {
    if (res.data.code === 2000) {
      locationTableData.data = res.data.data.record.data;
      locationTotalNum.value = res.data.data.record.total;

      cityStr.value = "";
      res.data.data.usualCities.forEach((val, index) => {
        if (index === 0) {
          cityStr.value += val;
        } else {
          cityStr.value += "," + val;
        }
      });
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 控制编辑表单显示
const showDialog = (type: number, row) => {
  editFormVisible.value = true;
  dialogType.value = type;
  ruleFormRef.value ? ruleFormRef.value.clearValidate() : false;
  if (type === 0) {
    dialogTitle.value = "添加代理";
    Object.keys(agentModel).forEach((key) => (agentModel[key] = null));
  } else {
    agentModel.id = row.id;
    agentModel.groupName = row.groupName;
    agentModel.userName = row.userName;
    agentModel.userMobile = row.userMobile;
    // agentModel.yibaoNo = row.yiBaoNumber;
    dialogTitle.value = "编辑代理";
  }
};

// 编辑表单提交
const formSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (dialogType.value === 0) {
        addAgent(agentModel).then((res) => {
          if (res.data.code === 2000) {
            ElMessage({
              message: "添加成功.",
              type: "success",
            });
            findAgent(searchModel);
          } else {
            switch (res.data.code) {
              case 5008:
                ElMessage.error("添加失败");
                break;
              default:
                ElMessage.error("添加失败.");
                break;
            }
          }
        });
      }
      if (dialogType.value === 1) {
        editAgent(agentModel).then((res) => {
          if (res.data.code === 2000) {
            ElMessage({
              message: "编辑成功.",
              type: "success",
            });
            findAgent(searchModel);
          } else {
            if (res.data.code === 5000) {
              ElMessage.error("手机号已存在.");
            }
          }
        });
      }
      Object.keys(agentModel).forEach((key) => (agentModel[key] = ""));
      editFormVisible.value = false;
    } else {
      return false;
    }
  });
};

//重置密码
const revisePassword = (row) => {
  ElMessageBox.confirm("是否确定重置密码?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    resetPass(row.id).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "重置成功.",
          type: "success",
        });
      } else {
        ElMessage.error("重置失败");
      }
    });
  });
};

//打开关联销售代表diglog框
const associationSalesReps = (row) => {
  salesRepsDialogVisible.value = true;
  salesReps.agentId = row.id;
  salesReps.channelGroupName = row.groupName;
  salesReps.channelUserName = row.userName;
  if (row.saleRepId) {
    alesRepresentativeShow.value = false;
    salesReps.salesRepresentativeID = row.saleRepId;
    salesReps.salesRepresentativeText = row.saleRepId + "—" + row.saleRepName;
  } else {
    alesRepresentativeShow.value = true;
    salesReps.salesRepresentativeID = null;
    salesReps.salesRepresentativeText = null;
  }
  if (row.saleDirectorId) {
    salesDirectorShow.value = false;
    salesReps.salesDirectorID = row.saleDirectorId;
    salesReps.salesDirectorText =
      row.saleDirectorId + "—" + row.saleDirectorName;
  } else {
    salesDirectorShow.value = true;
    salesReps.salesDirectorID = null;
    salesReps.salesDirectorText = null;
  }
};

//编辑销售代表
const editSalesReps = (type: number) => {
  if (type === 1) {
    alesRepresentativeShow.value = true;
    salesReps.salesRepresentativeText = null;
  }
  if (type === 2) {
    salesDirectorShow.value = true;
    salesReps.salesDirectorText = null;
  }
};

//根据员工id提取员工数据
const drawStaff = (userId: number, type: number) => {
  if (!userId) {
    ElMessage.warning("请输入员工编号");
    return;
  }
  findStaffByIdApi(userId).then((res) => {
    if (res.data.code === 2000) {
      if (res.data.data == null) {
        ElMessage.warning("该员工已禁用");
      }
      if (type === 1) {
        salesReps.salesRepresentativeText =
          res.data.data.id + "—" + res.data.data.username;
      }
      if (type === 2) {
        salesReps.salesDirectorText =
          res.data.data.id + "—" + res.data.data.username;
      }
    } else {
      switch (res.data.code) {
        case 5007:
          ElMessage.error("该员工不存在");
          break;
        default:
          ElMessage.error("查询失败");
          break;
      }
    }
  });
};

// 配置销售代理与销售总监
const setAgentSale = () => {
  setAgentSaleApi({
    agentId: salesReps.agentId,
    saleRepId: parseInt(salesReps.salesRepresentativeID),
    saleDirectorId: parseInt(salesReps.salesDirectorID),
  }).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "保存成功.",
        type: "success",
      });
      salesRepsDialogVisible.value = false;
      findAgent(searchModel);
    } else {
      switch (res.data.code) {
        case 4001:
          ElMessage.error("未找到对应销售代表.");
          break;
        case 4003:
          ElMessage.error("未找到对应销售总监.");
          break;
        default:
          ElMessage.error("保存失败");
          break;
      }
    }
  });
};

// 打开中视urldialog
const urlLocationDialog = (row) => {
  urlDialogVisible.value = true;
  urlModel.agentId = row.id;
  if (row.url) {
    urlModel.url = row.url;
  } else {
    urlModel.url = null;
  }
};

// 保存中视url
const editUrl = () => {
  if (!urlModel.url) {
    urlModel.url = "";
  }
  updateUrlApi(urlModel).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "保存成功.",
        type: "success",
      });
      urlDialogVisible.value = false;
      findAgent(searchModel);
    } else {
      ElMessage.error("保存失败");
    }
  });
};

// 配置一级代理套餐
const showAgentPage = ref(true);
const showPackConfigPage = ref(false);
const packConfig = (row) => {
  showAgentPage.value = false;
  showPackConfigPage.value = true;
  transData.value.agentId = row.id;
  transData.value.agentName = row.userName;
  transData.value.mobile = row.userMobile;
  transData.value.registerTime = row.createTime;
  transData.value.page = page;
  transData.value.size = size;
};

//导出代理商数据
const exportAgent = () => {
  findAgentExcelApi(searchModel).then((res) => {
    const blob = new Blob([res.data]);
    const fileName = "代理商管理数据.xls";
    const elink = document.createElement("a"); // 创建a标签
    elink.download = fileName; // 为a标签添加download属性
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click(); // 点击下载
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink); // 释放标签
  });
};

//返回
const goBack = () => {
  showAgentPage.value = true;
  showPackConfigPage.value = false;
};

onMounted(() => {
  findAgent(searchModel);
});
</script>

<style scoped>
:deep(.demo-form-inline) {
  display: grid;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, 25%);
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item) {
  width: 90%;
}

.subBtnBox {
  width: 100%;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}

.item__txt {
  box-sizing: border-box;
  line-height: 24px;
  padding: 0 9px;
}

.input-salesReps {
  width: 140px;
}

.btn-primary {
  margin-left: 15px;
  margin-right: 15px;
}

.span-location {
  margin-left: 10px;
}

/* :deep(.form-agentModel .el-input__wrapper) {
  border: 1px solid #DCDFE6;
} */
</style>
